import React, { useEffect, useState } from 'react';
import '@/views/Index/Screen/Screen.scss'
import Nav from '../../../components/Nav/Nav'
import service from '../../../api/index'

import type { ColumnsType } from 'antd/es/table';

import { Select, Table, Button, message, Switch, Input } from 'antd';



interface Props {

}

interface DataType {
    img1: string;
    proname: string;
    brand: string;
    category: string;
    originprice: number;
    discount: number;
    sales: number;
    issale: number;
    isseckill: number;
    isrecommend: number;
    proid: string;
}

interface Cate {
    value: string;
    lable: string;
    text:string;
}

function Screen(props: Props) {
    // 产品总数量
    let [total, setTotal] = useState()

    // 输入框的内容
    let [search, setSearch] = useState()

    // 搜索分类数组
    let [categorys, setCategorys] = useState<Cate[]>([])

    // 保存下拉菜单中选中的值
    let [category, setCategory] = useState('口红')

    // 分类列表
    let [categorylist, setCategoryList] = useState<Cate[]>([])


    // 表格数据源
    let [dataSource, setDateSource] = useState<DataType[]>([])

    // 表格头部
    const columns: ColumnsType<DataType> = [
        {
            title: '序号', //表格列的标题
            // dataIndex: 'order', //数据索引( 属性名 )
            // key: 'order',
            width: '6%',
            align: 'center',
            render: (_, record) => <a>{dataSource.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },
        {
            title: '图片',
            dataIndex: 'img1',
            key: 'img1',
            width: '8%',
            align: 'center',
            render: (_, record) => <img src={record.img1} style={{ maxWidth: '60%' }} />,
        },
        {
            title: '名称',
            dataIndex: 'proname',
            key: 'proname',
            width: '14%',
            ellipsis: true,
            align: 'center',
        },
        {
            title: '品牌',
            dataIndex: 'brand',
            key: 'brand',
            // width: '20%',
            align: 'center',
        },
        {
            title: '分类',
            dataIndex: 'category',
            key: 'category',
            // width: '20%',
            align: 'center',
            filters: categorylist,
            onFilter: (value: any, record) => lookup(record.category, value),
        },
        {
            title: '原价',
            dataIndex: 'originprice',
            key: 'originprice',
            // width: '20%',
            align: 'center',
            sorter: {
                compare: (a, b) => a.originprice - b.originprice,
                multiple: 3,
            },
        },
        {
            title: '折扣',
            dataIndex: 'discount',
            key: 'discount',
            // width: '20%',
            align: 'center',
            sorter: {
                compare: (a, b) => a.discount - b.discount,
                multiple: 3,
            },
        },
        {
            title: '销量',
            dataIndex: 'sales',
            key: 'sales',
            // width: '20%',
            align: 'center',
            sorter: {
                compare: (a, b) => a.sales - b.sales,
                multiple: 3,
            },
        },
        {
            title: '是否售卖',
            dataIndex: 'issale',
            key: 'issale',
            // width: '20%',
            align: 'center',
            render: (_, record) => {
                return <>
                    {
                        record.issale == 1 ?
                            <Switch disabled defaultChecked={true} />
                            :
                            <Switch disabled defaultChecked={false} />
                    }

                </>
            }
        },
        {
            title: '是否秒杀',
            dataIndex: 'isseckill',
            key: 'isseckill',
            // width: '20%',
            align: 'center',
            render: (_, record) => {
                return <>
                    {
                        record.isseckill == 1 ?
                            <Switch defaultChecked={true} onChange={() => { seckillChange(record.proid, record.isseckill) }} />
                            :
                            <Switch defaultChecked={false} onChange={() => { seckillChange(record.proid, record.isseckill) }} />
                    }

                </>
            }
        },
        {
            title: '是否推荐',
            dataIndex: 'isrecommend',
            key: 'isrecommend',
            // width: '20%',
            align: 'center',
            render: (_, record) => {
                return <>
                    {
                        record.isrecommend == 1 ?
                            <Switch defaultChecked={true} onChange={() => { recommendChange(record.proid, record.isrecommend) }} />
                            :
                            <Switch defaultChecked={false} onChange={() => { recommendChange(record.proid, record.isrecommend) }} />
                    }

                </>
            }
        },
        {
            title: '操作',
            // dataIndex: 'make', 
            // key: 'make',
            width: '10%',
            align: 'center',
            render: (_, record) => <Button className='remove' type="primary" danger onClick={() => { proDelete(record.proid) }} >Delete</Button>,
        },
    ];

    // 发请求
    useEffect(() => {
        // 获取商品列表
        productslist({ count: 1, limitNum: 10 })
        // 获取分类列表
        catalist()
    }, [])

    // 发送产品列表请求
    let productslist = async (payload = {}) => {
        let res = await service.pro.pro_list(payload)
        // console.log(res.data);
        if (res.data.code == '200') {
            // 给数据添加key属性
            res.data.data.map((item: any) => {
                item.key = item.proid
            })
            setDateSource(res.data.data)
            setTotal(res.data.total)
        }
    }
    // 发送分类列表请求
    let catalist = async (payload = {}) => {
        let res = await service.pro.pro_category(payload)
        // console.log(res.data);
        if (res.data.code == '200') {

            // 搜索分类
            let result = res.data.data.map((item: any) => {
                return (
                    { value: item, lable: item }
                )
            })
            setCategorys(result)

            // 分类列表
            let results = res.data.data.map((item: any) => {
                return (
                    { text: item, value: item }
                )
            })
            setCategoryList(results)
        }
    }

    let code = (res: any) => {
        if (res.data.code == '200') {
            message.success({
                content: res.data.message,
                style: {
                    marginTop: '20vh',
                },
            })
            productslist({ count: 1, limitNum: 10 })
        } else {
            message.error({
                content: res.data.message,
                style: {
                    marginTop: '20vh',
                },
            })
        }
    }


    // 改变是否秒杀开关状态
    let seckillChange = async (proid: any, flag: any) => {
        if (flag) {
            let res = await service.pro.pro_update({ proid, type: 'isseckill', flag: 0 })
            // console.log(res.data);
            code(res)
        } else {
            let res = await service.pro.pro_update({ proid, type: 'isseckill', flag: 1 })
            // console.log(res.data);
            code(res)
        }
    }
    // 改变是否推荐开关状态
    let recommendChange = async (proid: any, flag: any) => {
        if (flag) {
            let res = await service.pro.pro_update({ proid, type: 'isrecommend', flag: 0 })
            // console.log(res.data);
            code(res)
        } else {
            let res = await service.pro.pro_update({ proid, type: 'isrecommend', flag: 1 })
            // console.log(res.data);
            code(res)
        }
    }

    let proDelete = async (proid: any) => { }

    // 分页设置
    let pageChange = (page: any, pageSize: any) => {
        // console.log(page, pageSize);
        productslist({ count: page, limitNum: pageSize })
    };

    // 下拉分类选择
    let handleChange = (value: any) => {
        // console.log(value);
        setCategory(value)
    };
    // 保存输入框的数据
    let changeSearch = (e: any) => {
        setSearch(e.target.value)
    }
    //   筛选商品
    let handleSearch = async (payload = {}) => {
        // console.log(payload);
        let res = await service.pro.pro_search(payload)
        // console.log(res.data);
        if (res.data.code == '200') {
            // 给数据添加key属性
            res.data.data.map((item: any) => {
                item.key = item.proid
            })
            setDateSource(res.data.data)
            setTotal(res.data.data.length)
        }
    }

    // 根据列表中的分类筛选商品
    let lookup = (arr: any, value: any) => {
        let arrs = arr.includes(value)
        setTotal(arrs.length)
        return arrs
    }

    return (
        <div className='screen'>
            <Nav />
            <div className="list">
                <div className="search">
                    <Select
                        defaultValue="口红"
                        style={{ width: 120 }}
                        onChange={handleChange}
                        options={categorys}
                    />
                    <Input className='find' placeholder="请输入要查询的关键字..." onChange={(e) => { changeSearch(e) }} />
                    <Button type="primary" onClick={() => { handleSearch({ category, search }) }}>查询</Button>
                </div>
                <Table className='table' dataSource={dataSource} columns={columns} scroll={{ y: 380 }} pagination={{
                    showSizeChanger: false,
                    onChange: pageChange,
                    defaultCurrent: 1,
                    total: total
                }} />

            </div>
        </div>
    );
}

export default Screen;